<template>
  <BasicTabs v-model="tabname" :tabs="tabs" @tabChange="tabsChange"> </BasicTabs>
</template>

<script setup lang="ts">
  import { TabPaneItem } from '@/components/ui/basic-tabs/types'
  import GroupStatus from '../components/tabComponents/groupStatus.vue'
  import ComprehensiveReport from '../components/tabComponents/roving-spinning/comprehensiveReport.vue'
  import HistoricalQuery from '../components/tabComponents/roving-spinning/historicalQuery.vue'
  import FullYarnWarehouse from '../components/tabComponents/roving-spinning/yarnWarehouse.vue'
  import TailYarnWarehouse from '../components/tabComponents/roving-spinning/yarnWarehouse.vue'
  import RovingWarehouse from '../components/tabComponents/roving-spinning/yarnWarehouse.vue'
  import AuxiliaryWarehouse from '../components/tabComponents/roving-spinning/auxiliaryWarehouse.vue'
  import EmptyWarehouse from '../components/tabComponents/roving-spinning/emptyWarehouse.vue'

  const tabname = ref()
  const tabs = shallowRef<TabPaneItem[]>([
    {
      name: '111310',
      label: '状态总览',
      roles: ['111310'],
      slots: { default: h(GroupStatus, { statusCode: '111310' }) }
    },
    {
      name: '111320',
      label: '综合报表',
      roles: ['111320'],
      slots: { default: h(ComprehensiveReport, { statusCode: '111320' }) }
    },
    {
      name: '111340',
      label: '满纱库',
      roles: ['111340'],
      slots: { default: h(FullYarnWarehouse, { statusCode: '111340' }) }
    },
    {
      name: '111350',
      label: '尾纱库',
      roles: ['111350'],
      slots: { default: h(TailYarnWarehouse, { statusCode: '111350' }) }
    },
    {
      name: '111370',
      label: '空管库',
      roles: ['111370'],
      slots: { default: h(EmptyWarehouse, { statusCode: '111370' }) }
    },
    {
      name: '111360',
      label: '粗纱库',
      roles: ['111360'],
      slots: { default: h(RovingWarehouse, { statusCode: '111360' }) }
    },
    {
      name: '111380',
      label: '辅库',
      roles: ['111380'],
      slots: { default: h(AuxiliaryWarehouse, { statusCode: '111380' }) }
    },
    {
      name: '111330',
      label: '历史查询',
      roles: ['111330'],
      slots: { default: h(HistoricalQuery, { statusCode: '111330' }) }
    }
  ])

  const tabsChange = (tab) => {
    console.log(tab)
  }
</script>
